<script setup lang="ts">
import Camera from './components/camera.vue'
import Setting from './components/setting.vue'
import { Setting as SettingIcon, CameraFive, InnerShadowTopLeft } from '@icon-park/vue-next'
import { useConfigStore } from '@renderer/store/useConfig'
import useDrag from '@renderer/composables/useDrag'
const { config } = useConfigStore()
const { drag } = useDrag()
drag.run()
const quit = () => {
  window.api.quit()
}

const setRound = () => {
  config.rounded = !config.rounded
  if (config.rounded) {
    window.api.windowSize({ aspectRatio: 1, width: 300, height: 300 })
  } else {
    window.api.windowSize({ aspectRatio: 16/9, width: 500, height: 280 })
  }
}
</script>

<template>
  <Suspense>
    <main class="relative group" @contextmenu="quit">
      <section
        class="absolute z-10 left-1/2 -translate-x-1/2 mt-1 text-white opacity-90 cursor-pointer"
      >
        <SettingIcon
          v-if="config.pages == 'camera'"
          size="24"
          @click="config.pages = 'setting'"
          class="hidden group-hover:block"
        />
        <CameraFive v-if="config.pages == 'setting'" size="24" @click="config.pages = 'camera'" />
      </section>
      <InnerShadowTopLeft
        v-if="config.pages == 'camera'"
        class="absolute left-1/2 -translate-x-1/2 bottom-2 text-white z-10 cursor-pointer"
        size="24"
        @click="setRound"
      />

      <section>
        <Camera v-if="config.pages == 'camera'" />
        <Setting v-else />
      </section>
    </main>
  </Suspense>
</template>

<style lang="less"></style>
